package com.kk.framework.ui.framenorth;

import org.zkoss.spring.SpringUtil;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zul.Borderlayout;
import org.zkoss.zul.Center;
import org.zkoss.zul.Div;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Hlayout;
import org.zkoss.zul.Image;
import org.zkoss.zul.Label;
import org.zkoss.zul.Popup;
import org.zkoss.zul.Vlayout;
import org.zkoss.zul.West;

import com.kk.framework.ui.SimpleThemeProvider;
import com.kk.framework.ui.SystemPageManager;
import com.kk.framework.util.Constants;

/**
 * 框架头部，模块导航按钮，Logo
 * @author 杨晓康
 *
 */
@SuppressWarnings("serial")
public class ToolPanel extends Borderlayout implements EventListener<Event> {
    private SystemPageManager _pageManager;
    private boolean _isNavPanelHidden = false;

    private West _westToolbarPanel;
    private Center _centerToolbarPanel;

    private Popup _themeSettingPanel;
    private Popup _ctiPanel;
    private Popup _messagePanel;
    private Popup _noticePanel;

    public ToolPanel() {
        this._pageManager = (SystemPageManager) SpringUtil.getBean("pageService");

        this.setStyle("border:0");

        this._westToolbarPanel = new West();
        this._westToolbarPanel.setSclass("frame-north-west");
        this._westToolbarPanel.setWidth("204px");
        this._westToolbarPanel.setBorder("none");
        this.appendChild(this._westToolbarPanel);

        this._centerToolbarPanel = new Center();
        this._centerToolbarPanel.setBorder("none");
        this._centerToolbarPanel.setSclass("frame-north-center");
        this.appendChild(this._centerToolbarPanel);

        this.initWestToolbuttons();
        this.initCenterToolbuttons();
    }

    private void initWestToolbuttons() {
        Hbox hbox = new Hbox();

        this._westToolbarPanel.appendChild(hbox);

        Image messageBtn = new Image("./imgs/message-top.png");
        messageBtn.setTooltiptext("消息");
        messageBtn.setId("BTN_MESSAGE");
        messageBtn.addEventListener(Events.ON_CLICK, this);
        messageBtn.setStyle("margin-top:4px;margin-left:16px;cursor:pointer");
        hbox.appendChild(messageBtn);

        Div paddingDiv = new Div();
        paddingDiv.setStyle("margin-top:8px;margin-top:10px;color:#fff;");
        hbox.appendChild(paddingDiv);

        Label lblMsgCnt = new Label();
        lblMsgCnt.setValue("6");
        paddingDiv.appendChild(lblMsgCnt);

        Image noticeBtn = new Image("./imgs/notice.png");
        noticeBtn.setTooltiptext("提醒");
        noticeBtn.setId("BTN_NOTICE");
        noticeBtn.addEventListener(Events.ON_CLICK, this);
        noticeBtn.setStyle("margin-top:4px;margin-left:16px;cursor:pointer");
        hbox.appendChild(noticeBtn);

        paddingDiv = new Div();
        paddingDiv.setStyle("margin-top:8px;margin-top:10px;color:#fff;");
        hbox.appendChild(paddingDiv);

        lblMsgCnt = new Label();
        lblMsgCnt.setValue("6");
        paddingDiv.appendChild(lblMsgCnt);
    }

    private void initCenterToolbuttons() {
        Borderlayout container = new Borderlayout();
        this._centerToolbarPanel.appendChild(container);
        West west = new West();
        west.setWidth("200px");
        west.setBorder("none");
        container.appendChild(west);

        Hlayout hbox = new Hlayout();
        hbox.setSclass("frame-north-center");
        hbox.setSpacing("0px");
        west.appendChild(hbox);

        Div paddingDiv = new Div();
        paddingDiv.setSclass("toolbutton-frametop");
        paddingDiv.setHeight("35px");
        hbox.appendChild(paddingDiv);
        Image btnSidebar = new Image("./imgs/expend-sidebar.png");
        btnSidebar.setHover("./imgs/expend-sidebar-over.png");
        btnSidebar.setStyle("cursor:pointer");
        btnSidebar.setTooltiptext("收缩边栏");
        btnSidebar.setId("BTN_SIDEBAR");
        btnSidebar.addEventListener(Events.ON_CLICK, this);
        paddingDiv.appendChild(btnSidebar);

        paddingDiv = new Div();
        paddingDiv.setHeight("35px");
        paddingDiv.setSclass("toolbutton-frametop");
        hbox.appendChild(paddingDiv);
        Image btnTheme = new Image("./imgs/theme.png");
        btnTheme.setHover("./imgs/theme-over.png");
        btnTheme.setStyle("cursor:pointer");
        btnTheme.setTooltiptext("主题风格");
        btnTheme.setId("BTN_THEME");
        btnTheme.addEventListener(Events.ON_CLICK, this);
        paddingDiv.appendChild(btnTheme);

        this._themeSettingPanel = this.createThemeSettingPanel();
        hbox.appendChild(this._themeSettingPanel);

        this._noticePanel = this.createNoticePanel();
        hbox.appendChild(this._noticePanel);

        this._messagePanel = this.createMessagePanel();
        hbox.appendChild(this._messagePanel);

        Center center = new Center();
        container.appendChild(center);
        center.setBorder("none");
        center.setStyle("text-align:right");

        Image logo = new Image("./imgs/logo.png");
        logo.setStyle("margin-top:2px; margin-right:4px");
        center.appendChild(logo);
    }

    private Popup createThemeSettingPanel() {
        Popup mainContent = new Popup();
        mainContent.setSclass("panel-theme-setting");
        mainContent.setWidth("220px");

        Div div = new Div();
        mainContent.appendChild(div);

        Div beforeTriangleDiv = new Div();
        beforeTriangleDiv.setSclass("before-triangle-div");
        div.appendChild(beforeTriangleDiv);

        Div divContent = new Div();
        divContent.setSclass("popup-content-div");
        div.appendChild(divContent);

        Vlayout vlayout = new Vlayout();
        divContent.appendChild(vlayout);

        Div paddingDiv = new Div();
        paddingDiv.setStyle("padding:8px;background-color:#eee;border-bottom:1px solid #c1c1c1");
        vlayout.appendChild(paddingDiv);
        vlayout.setSpacing("0");

        Label lbl = new Label("选择主题");
        lbl.setSclass("lbl-title");
        lbl.setStyle("font-size:14px;font-family:\"Microsoft YaHei\"");
        paddingDiv.appendChild(lbl);

        paddingDiv = new Div();
        paddingDiv.setStyle("padding: 10px;");
        vlayout.appendChild(paddingDiv);

        Hbox hbox = new Hbox();
        hbox.setSpacing("10px");
        paddingDiv.appendChild(hbox);

        Div colorDiv = new Div();
        colorDiv.setWidth("18px");
        colorDiv.setHeight("18px");
        colorDiv.setStyle("background-color:#33597c;cursor:pointer;border:1px solid #c1c1c1");
        colorDiv.addEventListener(Events.ON_CLICK, new EventListener<Event>() {

            @Override
            public void onEvent(Event evt) throws Exception {
                SimpleThemeProvider.setSkinCookie(Executions.getCurrent(), Constants.THEME_BLUE);
                Executions.sendRedirect("./index.zul");
            }
        });
        hbox.appendChild(colorDiv);

        colorDiv = new Div();
        colorDiv.setWidth("18px");
        colorDiv.setHeight("18px");
        colorDiv.setStyle("background-color:#ba5d32;cursor:pointer;border:1px solid #c1c1c1");
        colorDiv.addEventListener(Events.ON_CLICK, new EventListener<Event>() {

            @Override
            public void onEvent(Event evt) throws Exception {
                SimpleThemeProvider.setSkinCookie(Executions.getCurrent(), Constants.THEME_BROWN);
                Executions.sendRedirect("./index.zul");
            }

        });
        hbox.appendChild(colorDiv);

        colorDiv = new Div();
        colorDiv.setWidth("18px");
        colorDiv.setHeight("18px");
        colorDiv.setStyle("background-color:#b94b6f;cursor:pointer;border:1px solid #c1c1c1");
        colorDiv.addEventListener(Events.ON_CLICK, new EventListener<Event>() {

            @Override
            public void onEvent(Event evt) throws Exception {
                SimpleThemeProvider.setSkinCookie(Executions.getCurrent(), Constants.THEME_PINK);
                Executions.sendRedirect("./index.zul");
            }

        });
        hbox.appendChild(colorDiv);

        colorDiv = new Div();
        colorDiv.setWidth("18px");
        colorDiv.setHeight("18px");
        colorDiv.setStyle("background-color:#6f8745;cursor:pointer;border:1px solid #c1c1c1");
        colorDiv.addEventListener(Events.ON_CLICK, new EventListener<Event>() {

            @Override
            public void onEvent(Event evt) throws Exception {
                SimpleThemeProvider.setSkinCookie(Executions.getCurrent(), Constants.THEME_GREEN);
                Executions.sendRedirect("./index.zul");
            }

        });
        hbox.appendChild(colorDiv);

        colorDiv = new Div();
        colorDiv.setWidth("18px");
        colorDiv.setHeight("18px");
        colorDiv.setStyle("background-color:#86618f;cursor:pointer;border:1px solid #c1c1c1");
        colorDiv.addEventListener(Events.ON_CLICK, new EventListener<Event>() {

            @Override
            public void onEvent(Event evt) throws Exception {
                SimpleThemeProvider.setSkinCookie(Executions.getCurrent(), Constants.THEME_PURPLE);
                Executions.sendRedirect("./index.zul");
            }

        });
        hbox.appendChild(colorDiv);

        colorDiv = new Div();
        colorDiv.setWidth("18px");
        colorDiv.setHeight("18px");
        colorDiv.setStyle("background-color:#575757;cursor:pointer;border:1px solid #c1c1c1");
        colorDiv.addEventListener(Events.ON_CLICK, new EventListener<Event>() {

            @Override
            public void onEvent(Event evt) throws Exception {
                SimpleThemeProvider.setSkinCookie(Executions.getCurrent(), Constants.THEME_BLACK);
                Executions.sendRedirect("./index.zul");
            }

        });
        hbox.appendChild(colorDiv);

        return mainContent;
    }

    private Popup createMessagePanel() {
        Popup mainContent = new Popup();
        mainContent.setSclass("panel-theme-setting");
        mainContent.setWidth("250px");

        Div div = new Div();
        mainContent.appendChild(div);

        Div beforeTriangleDiv = new Div();
        beforeTriangleDiv.setSclass("before-triangle-div-l");
        div.appendChild(beforeTriangleDiv);

        Div divContent = new Div();
        divContent.setSclass("popup-content-div");
        div.appendChild(divContent);

        Vlayout vlayout = new Vlayout();
        divContent.appendChild(vlayout);

        Div paddingDiv = new Div();
        paddingDiv.setStyle("padding:8px;background-color:#eee;border-bottom:1px solid #c1c1c1");
        vlayout.appendChild(paddingDiv);
        vlayout.setSpacing("0");

        Label lbl = new Label("个人消息");
        lbl.setSclass("lbl-title");
        lbl.setStyle("font-size:14px;font-family:\"Microsoft YaHei\"");
        paddingDiv.appendChild(lbl);

        paddingDiv = new Div();
        paddingDiv.setStyle("padding: 10px;");
        vlayout.appendChild(paddingDiv);

        return mainContent;
    }

    private Popup createNoticePanel() {
        Popup mainContent = new Popup();
        mainContent.setSclass("panel-theme-setting");
        mainContent.setWidth("250px");

        Div div = new Div();
        mainContent.appendChild(div);

        Div beforeTriangleDiv = new Div();
        beforeTriangleDiv.setSclass("before-triangle-div");
        div.appendChild(beforeTriangleDiv);

        Div divContent = new Div();
        divContent.setSclass("popup-content-div");
        div.appendChild(divContent);

        Vlayout vlayout = new Vlayout();
        divContent.appendChild(vlayout);

        Div paddingDiv = new Div();
        paddingDiv.setStyle("padding:8px;background-color:#eee;border-bottom:1px solid #c1c1c1");
        vlayout.appendChild(paddingDiv);
        vlayout.setSpacing("0");

        Label lbl = new Label("通知提醒");
        lbl.setSclass("lbl-title");
        lbl.setStyle("font-size:14px;font-family:\"Microsoft YaHei\"");
        paddingDiv.appendChild(lbl);

        paddingDiv = new Div();
        paddingDiv.setStyle("padding: 10px;");
        vlayout.appendChild(paddingDiv);

        Hbox hbox = new Hbox();
        hbox.setSpacing("10px");
        paddingDiv.appendChild(hbox);

        return mainContent;
    }

    @Override
    public void onEvent(Event event) throws Exception {
        String compId = event.getTarget().getId();

        if (compId.equals("BTN_SIDEBAR")) {
            West west = this._pageManager.getWestModuleNavBar();
            if (this._isNavPanelHidden) {
                west.setVisible(true);
                this._westToolbarPanel.setVisible(true);
                this._isNavPanelHidden = false;
            } else {
                west.setVisible(false);
                this._westToolbarPanel.setVisible(false);
                this._isNavPanelHidden = true;
            }
        } else if (compId.equals("BTN_THEME")) {
            if (this._isNavPanelHidden)
                this._themeSettingPanel.open(48, 28);
            else
                this._themeSettingPanel.open(252, 28);
        } else if (compId.equals("BTN_CALL_CENTER")) {
            this._ctiPanel.open(315, 28);
        } else if (compId.equals("BTN_NOTICE")) {
            this._noticePanel.open(50, 28);
        } else if (compId.equals("BTN_MESSAGE")) {
            this._messagePanel.open(0, 28);
        }
    }
}
